<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background: red;
    }
    p {
      background: green;
    }
  </style>
</head>
<body>
  <div>
    <p>ppppp</p>
  </div>
  <input type="text">
  <script>
    var oDiv = document.querySelector('div')
    // 1、单击事件
    oDiv.onclick = function () {
      console.log('单击')
    }
    // 2、双击事件
    oDiv.ondblclick = function () {
      console.log('双击666')
    }
    // 3、鼠标右键事件（上下文菜单）
    // 右键按下抬起也会出发 mousedown mouseup
    oDiv.oncontextmenu = function () {
      // context 上下文
      // menu    菜单
      console.log('右键')
    }
    // 4、鼠标按下事件
    oDiv.onmousedown = function () {
      console.log('按下')
    }
    // 5、鼠标抬起事件
    oDiv.onmouseup = function () {
      console.log('抬起')
    }
    // 6.1、鼠标移入
    oDiv.onmouseover = function () {
      console.log('鼠标移入over')
    }
    // 6.2、鼠标移入，但是他不会在穿过子元素的时候出发
    oDiv.onmouseenter = function () {
      console.log('鼠标移入enter')
    }
    // 7.1、鼠标移出
    oDiv.onmouseout = function () {
      console.log('鼠标移出out')
    }
    // 7.2、鼠标移出，但是他不会在穿过子元素的时候出发
    oDiv.onmouseleave = function () {
      console.log('鼠标移出leave')
    }
    // 8、鼠标移动事件
    oDiv.onmousemove = function () {
      console.log('移动')
    }

    var oInput = document.querySelector('input')

    oInput.onkeydown = function () {
      console.log('键盘按下')
    }
    oInput.onkeyup = function () {
      console.log('键盘抬起')
    }
    // 就算键盘一直按下不抬起这个press事件也会触发
    oInput.onkeypress = function () {
      console.log('键盘敲击')
    }

    



  </script>
</body>
</html>